<template>
  <div>
    <el-card>
      <slide-verify
        :l="42"
        :r="10"
        :w="250"
        :h="145"
        :imgs="picArray"
        :show="true"
        slider-text="向右滑动完成验证"
        ref="slideverify"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
      ></slide-verify>
    </el-card>
  </div>
</template>

<script>
import pinyin from "pinyin";
let aa = pinyin("你好", {
  heteronym: true, // 启用多音字模式
});
console.log(aa);
// aa.forEach((r) => {
//   r.name = r[0].slice(0, 1).toUpperCase();
// });
// let bb = aa.map((r) => r.name);

// bb = [...new Set(bb)];
// console.log(bb, 2);
export default {
  name: "SliderVerify",
  data() {
    return {
      //在data中引入`assets`中的图片可以通过`require`的方式来引入
      picArray: [
        require("../../../../assets/image/hellowword/aodiA7.jpeg"),
        require("../../../../assets/image/hellowword/bmwM8.jpeg"),
        require("../../../../assets/image/hellowword/bc.jpeg"),
      ],
    };
  },
  methods: {
    onSuccess(times) {
      // console.log(times);

      //往父级传递验证通过的函数
      this.$emit("success", times);
    },
    onReset() {
      //重置图片验证组件
      this.$refs.slideverify.reset();
    },
    onFail() {
      this.$message.error("失败");
    },
    onRefresh() {
      this.$message("刷新");
    },
  },
};
</script>
